// 获取轮播图容器元素（最外层div）
var carousel = document.querySelector('.carousel');

// 获取轮播图内部滑动轨道（包含所有轮播项的元素）
var inner = carousel.querySelector('.carousel-inner');

// 获取所有轮播项（每张图片的容器）
var items = carousel.querySelectorAll('.carousel-item');

// 获取"上一张"按钮
var prevBtn = carousel.querySelector('.carousel-control.prev');

// 获取"下一张"按钮
var nextBtn = carousel.querySelector('.carousel-control.next');

// 获取所有指示器小圆点（底部的小圆点）
var indicators = carousel.querySelectorAll('.indicator');

// 获取导航栏元素
var navbar = document.querySelector('.navbar');

// 当前显示的轮播项索引（从0开始）
var currentIndex = 0;

// 自动轮播的定时器变量（用于后面清除定时器）
var autoPlayTimer;

/* ========== 轮播图功能函数 ========== */

/**
 * 更新轮播图显示状态
 * 1. 移动内部滑动轨道到正确位置
 * 2. 更新指示器小圆点的激活状态
 */
function updateCarousel() {
  // 通过transform移动内部滑动轨道
  // translateX(-100%)表示向左移动一个轮播项的宽度
  inner.style.transform = 'translateX(-' + (currentIndex * 100) + '%)';
  
  // 遍历所有指示器小圆点
  for (var i = 0; i < indicators.length; i++) {
    // toggle方法的第二个参数：为true就添加类，false就移除类
    // 当前索引的小圆点添加active类，其他的移除
    indicators[i].classList.toggle('active', i === currentIndex);
  }
}

/**
 * 计算新的轮播图索引（处理循环逻辑）
 * @param {number} step 移动步数（1表示下一张，-1表示上一张）
 * @return {number} 计算后的新索引
 */
function getNewIndex(step) {
  // 通过取模运算实现循环：
  // - 当到最后一个时，+1会回到第一个
  // - 当到第一个时，-1会回到最后一个
  return (currentIndex + step + items.length) % items.length;
}

/**
 * 移动轮播图到指定位置
 * @param {number} step 移动步数（1表示下一张，-1表示上一张）
 */
function moveCarousel(step) {
  // 计算新的索引位置
  currentIndex = getNewIndex(step);
  // 更新轮播图显示
  updateCarousel();
}

/**
 * 开始自动轮播（每隔5秒自动切换）
 */
function startAutoPlay() {
  // 设置定时器，每5000毫秒（5秒）执行一次
  autoPlayTimer = setInterval(function() {
    // 每次自动切换到下一张
    moveCarousel(1);
  }, 5000);
}

/**
 * 停止自动轮播
 */
function stopAutoPlay() {
  // 清除之前设置的定时器
  clearInterval(autoPlayTimer);
}

/**
 * 初始化轮播图的所有事件监听
 */
function initCarouselEvents() {
  // "下一张"按钮点击事件
  nextBtn.addEventListener('click', function() {
    moveCarousel(1); // 向右移动一张
  });
  
  // "上一张"按钮点击事件
  prevBtn.addEventListener('click', function() {
    moveCarousel(-1); // 向左移动一张
  });

  // 为每个指示器小圆点添加点击事件
  for (var i = 0; i < indicators.length; i++) {
    indicators[i].addEventListener('click', function() {
      // 获取被点击的小圆点的索引位置
      currentIndex = Array.from(indicators).indexOf(this);
      // 更新轮播图显示
      updateCarousel();
    });
  }

  // 鼠标移入轮播图时暂停自动轮播
  carousel.addEventListener('mouseenter', stopAutoPlay);
  
  // 鼠标移出轮播图时恢复自动轮播
  carousel.addEventListener('mouseleave', startAutoPlay);
}

/* ========== 导航栏功能函数 ========== */

/**
 * 根据页面滚动位置更新导航栏样式
 */
function updateNavbar() {
  // 判断页面是否向下滚动超过50像素
  var isScrolled = window.scrollY > 50;
  
  // 设置导航栏背景颜色：
  // - 滚动时：半透明白色
  // - 未滚动：纯白色
  navbar.style.background = isScrolled ? 'rgba(255, 255, 255, 0.9)' : '#fff';
  
  // 始终为导航栏添加阴影效果
  navbar.style.boxShadow = '0 4px 8px rgba(42, 67, 101, 0.1)';
}

/**
 * 初始化导航栏事件监听
 */
function initNavbarEvents() {
  // 监听页面滚动事件，滚动时更新导航栏样式
  window.addEventListener('scroll', updateNavbar);
}

/* ========== 初始化函数 ========== */

/**
 * 页面初始化函数
 */
function init() {
  // 初始化轮播图位置
  updateCarousel();
  
  // 开始自动轮播
  startAutoPlay();
  
  // 设置轮播图的事件监听
  initCarouselEvents();
  
  // 设置导航栏的事件监听
  initNavbarEvents();
}

// 当DOM加载完成后，执行初始化函数
document.addEventListener('DOMContentLoaded', init);